<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="element/index.css" />
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="element/index.js"></script>
		<title></title>
		<style>
		*{
			margin: 0; 
			padding: 0;
		}
		#app{
			width: 1200px;
			margin: 30px auto;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.el-header{
			margin-top:10px ;
			height: 300px;
		}
		.name{
			height:50px;
			position: sticky; 
			top: 0px;  
			z-index: 999;
			background-color: white;
			border: 2px solid #F8F8FF;
			margin-top: 0px;
		}
		.title{
			width: 150px;
			height: 40px;
			margin-top:15px;
			text-align: center;
		}
		.add-data{
			width: 150px;
			height: 40px;
			margin-top:8px;
		}
		.search_name{
			padding-left:60px ;
			width: 300px;
			height: 40px;
			margin-top: 7px;
			font-size:15px;
		}
		.search_num{
			width: 350px;
			margin-top: 7px;
			height: 40px;
			font-size:15px;
		}
		.search-icon{
			width: 100px;
			margin-top: 7px;
			height: 40px;
			font-size:15px;	
			margin-left: 25px;
		}
		.el-main{
			
		}
		.main_text{
			width: 900px;
			margin: 0 auto;
		}
		.el-footer{
			height: 40px;
		}
		.page{
			width: 700px;
			margin: 15px auto;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="22">
							<div class="title"><h3>用户管理</h3></div>
						</el-col>
						<el-col :span="1">
							<div class="add-data"><el-button type="primary"><el-link href="adduser.html" style="color: white;" target="_self">添加</el-link></el-button></div>
						</el-col>
					</el-row>	
				</el-header>
				<!-- 页眉 -->
				<el-header>	
					<el-row>
						<el-col :span="10">
						 <div class="search_name">
							 <span>姓名：</span>
							 <el-select  v-model="search_value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
								 <el-option v-for="item in search_options" :key="item.search_value" :label="item.search_label" :value="item.search_value"></el-option>
							 </el-select>
						 </div>
						</el-col>
						<el-col :span="10">
							<div class="search_num">
								<span>工号：</span>
								<el-select  v-model="search_value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
									 <el-option v-for="item in search_options" :key="item.search_value" :label="item.search_label" :value="item.search_value"></el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="3">
							<div class="search-icon"><el-button type="primary" icon="el-icon-search" >搜索</el-button></div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
								  <el-table :data="tableData" stripe border style="width: 100%" highlight-current-row >
									<el-table-column fixed prop="id" label="编号"  width="80"></el-table-column>
								    <el-table-column fixed prop="num" label="工号"  width="150"></el-table-column>
								    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
								    <el-table-column prop="status" label="状态" width="150"></el-table-column>
									<el-table-column prop="role" label="角色" width="150"></el-table-column>
								    <el-table-column fixed="right" label="操作" width="180">
								      <template slot-scope="scope">
											  <el-button type="primary" size="mini" ><el-link style="color: white;">启用</el-link></el-button>
											  <el-button type="danger" size="mini"><el-link style="color: white;">禁用</el-link></el-button>
								      </template>
								    </el-table-column>
								  </el-table>
								</template>
							</div>
						</el-col>
					</el-row>
				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							  <div class="page">
							    <el-pagination @click="change_page(index)" :page-sizes="[page_sizes]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" background="blue"></el-pagination>
							  </div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el:"#app",
		data:{
			page_sizes:5,
			tableData: [{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},
			{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			},{
				id:'1',
				num:'12345646',
				name:'王小峰',
				status:'禁用',
				role:'老师'
			}],
			search_options:[{
				value:'tableData.project',
			}],
			status_options: [{
				value: '选项1',
				label: '审核中',
			},{
				value: '选项2',
				label: '审核完成',
			}],
		},
		methods: {
			search:function(){
				
			},
			change_page:function(index){
				
			}
		},
		// created:function(){
		// 	this.findAll()
		// },
	})
</script>

